<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Infinite Scroll Masonry with HTML/CSS/JS</title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .masonry {
            column-count: 3;
            column-gap: 1em;
        }

        .masonry img {
            width: 100%;
            display: block;
            margin-bottom: 1em;
        }

        @media (max-width: 768px) {
            .masonry {
                column-count: 2;
            }
        }

        @media (max-width: 480px) {
            .masonry {
                column-count: 1;
            }
        }
    </style>
</head>
<body>

<div class="container">
    <div class="masonry" id="masonryContainer"></div>
    <div id="loadingStatus" style="text-align:center; margin-top:20px;"></div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const masonryContainer = document.getElementById('masonryContainer');
        const loadingStatus = document.getElementById('loadingStatus');
        const pageToLoad = 1000; // 要加载的页数
        const itemsPerPage = 10000; // 每页的图片数量
        const totalItems = pageToLoad * itemsPerPage ; // 总共要加载的图片数量
        let loadedItems = 0; // 已加载的图片数量
        let loading = false; // 加载状态

        // 模拟从API获取图片数据的函数
        const fetchImages = async (page) => {
            // 在实际应用中，这里应该是一个API调用
            // 为了演示，我们返回一个模拟的图片数组
            const images = [];
            for (let i = 0; i < itemsPerPage; i++) {
                const imageIndex = (page - 1) * itemsPerPage + i;
                images.push(`https://picsum.photos/id/${imageIndex + 1}/200/300`);
            }
            return images;
        };

        const appendImages = (images) => {
            images.forEach(src => {
                const img = document.createElement('img');
                img.src = src;
                masonryContainer.appendChild(img);
            });
            loadedItems += images.length;
            // 更新加载状态
            updateLoadingStatus();
        };

        const updateLoadingStatus = () => {
            if (loadedItems < totalItems) {
                loadingStatus.textContent = 'Loading images...';
            } else {
                loadingStatus.textContent = 'All images loaded!';
                loadingStatus.style.color = 'green';
            }
        };

        const loadImages = async () => {
            if (loading || loadedItems >= totalItems) return;
            loading = true;

            try {
                for (let page = 1; page <= pageToLoad; page++) {
                    const images = await fetchImages(page);
                    appendImages(images);
                    // 如果不需要分页加载效果，可以移除下面的await new Promise(resolve => setTimeout(resolve, 1000));
                    // 这行代码用于模拟网络延迟，使分页加载效果更加明显
                    await new Promise(resolve => setTimeout(resolve, 4000));
                }
            } catch (error) {
                console.error('Error fetching images:', error);
            } finally {
                loading = false;
            }
        };

        // 调用函数以加载图片
        loadImages();
    });
</script>

</body>
</html>